@react-aria/gridlist

What is @react-aria/gridlist?

@react-aria/gridlist is a React library that provides accessible components and hooks for creating grid lists. It is part of the React Aria collection, which focuses on providing accessible UI components that adhere to WAI-ARIA standards.

What are @react-aria/gridlist's main functionalities?

GridList

This code demonstrates how to create a basic grid list using the @react-aria/gridlist package. The useGridList hook is used to manage the grid list state and properties, while the useGridListItem hook is used for individual grid list items.

import { useGridList, useGridListItem } from '@react-aria/gridlist';
import { useListState } from '@react-stately/list';

function GridListExample(props) {
  let state = useListState(props);
  let ref = React.useRef();
  let { gridProps } = useGridList(props, state, ref);

  return (
    <div {...gridProps} ref={ref}>
      {[...state.collection].map(item => (
        <GridListItem key={item.key} item={item} state={state} />
      ))}
    </div>
  );
}

function GridListItem({ item, state }) {
  let ref = React.useRef();
  let { gridListItemProps } = useGridListItem({ node: item }, state, ref);

  return (
    <div {...gridListItemProps} ref={ref}>
      {item.rendered}
    </div>
  );
}

Keyboard Navigation

This example extends the basic grid list to include keyboard navigation. By setting the tabIndex to 0 on each grid list item, users can navigate through the items using the keyboard.

import { useGridList, useGridListItem } from '@react-aria/gridlist';
import { useListState } from '@react-stately/list';

function GridListWithKeyboardNavigation(props) {
  let state = useListState(props);
  let ref = React.useRef();
  let { gridProps } = useGridList(props, state, ref);

  return (
    <div {...gridProps} ref={ref}>
      {[...state.collection].map(item => (
        <GridListItem key={item.key} item={item} state={state} />
      ))}
    </div>
  );
}

function GridListItem({ item, state }) {
  let ref = React.useRef();
  let { gridListItemProps } = useGridListItem({ node: item }, state, ref);

  return (
    <div {...gridListItemProps} ref={ref} tabIndex={0}>
      {item.rendered}
    </div>
  );
}

Other packages similar to @react-aria/gridlist

react-virtualized

react-virtualized provides a set of components for efficiently rendering large lists and tabular data. It focuses on performance and virtualization, which makes it suitable for handling large datasets. Unlike @react-aria/gridlist, it does not specifically focus on accessibility.

react-window

react-window is a lightweight alternative to react-virtualized for rendering large lists and grids. It offers similar performance benefits but with a smaller bundle size. Like react-virtualized, it does not emphasize accessibility features as @react-aria/gridlist does.

react-table

react-table is a library for building fast and flexible tables in React. It provides a lot of customization options and supports features like sorting, filtering, and pagination. While it is powerful for table data, it does not inherently provide the same level of accessibility as @react-aria/gridlist.

README

@react-aria/gridlist

This package is part of react-spectrum. See the repo for more details.